<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多层表头</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->
<style type="text/css">
.abilitybar {
    height:20px; 
    margin : 2px 0;
}
.abilitybar .bar { 
    background-color:#0c6; 
    height:20px; 
    float: left;
    margin: 8px 5px 0 0;
}
</style>
</head>
<body>
  <div class="page_content">
	<div id="maingrid"></div>
  </div>
<script type="text/javascript">
		 var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"col1":"玄武区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":2,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"-45.7%","col14":"11"},
      {"col1":"鼓楼区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":3,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"360.7%","col14":"10"},
      {"col1":"建邺区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":4,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"116.7%","col14":"3"},
      {"col1":"白下区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":1,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"6.5%","col14":"15"},
      {"col1":"秦淮区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":2,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"-11.6%","col14":"12"},
      {"col1":"下关区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":2,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"-74.8%","col14":"2"},
      {"col1":"雨花台区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":5,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"66.5%","col14":"2"},
      {"col1":"浦口区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":4,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"70.5%","col14":"9"},
      {"col1":"栖霞区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":1,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"269.9%","col14":"8"},
      {"col1":"江宁区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":1,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"66.5%","col14":"5"},
      {"col1":"六合区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":3,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"66.5%","col14":"12"},
      {"col1":"溧水县","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":1,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"-14.2%","col14":"18"},
      {"col1":"高淳县","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":5,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"66.5%","col14":"17"},
      {"col1":"崇安区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":3,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"60%","col14":"14"},
      {"col1":"北塘区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":3,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"133.3%","col14":"7"},
      {"col1":"南长区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":2,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"66.5%","col14":"6"},
      {"col1":"锡山区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":4,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"56.9%","col14":"4"},
      {"col1":"惠山区","col2":"1900000","col3":"29000.0","col4":"14300.0","col5":"43300.0","col6":2,"col7":"360.0","col8":"56.0","col9":"13000.0","col10":"13000.0","col11":"26000.0","col12":"17300.0","col13":"-13.1%","col14":"13"},
      ]}
       

       //数据表格
    var g;
        
    function initComplete(){
    	 g = $("#maingrid").quiGrid({
                columns: [ 
                  { display: '地区', name: 'col1',width: 100, frozen: true},
                  { display: '本期完成情况', columns: [
                    { display: '计划金额', name: 'col2', width: 100 },
                    { display: '实际金额', name: 'col3', width: 100 },
                    { display: '流转金额', name: 'col4', width: 100},
                    { display: '合计', name: 'col5', width: 100},
                    { display: '进度', name: 'col6', width: 200,render: renderAbilityBar},
                    { display: '其中之一', name: 'col7', width: 100},
                    { display: '其中之二', name: 'col8', width: 100}
                    ]},
                  { display: '同期完成情况', columns: [
                    { display: '实际金额', name: 'col9', width: 100 },
                    { display: '流转金额', name: 'col10', width: 100 },
                    { display: '合计', name: 'col11', width: 100},
                    { display: '同比增量', name: 'col12', width: 100},
                    { display: '同比增幅', name: 'col13', width: 100, render:renderText}
                    ]},
                  { display: '排名', name: 'col14',width: 100, render: function(rowdata, rowindex, value, column){
                       return  "<span style='font-weight:bold;'>" + value + "</span>"
                      }}
                ], 
                data:testData, 
                pageSize: 10, sortName: 'name',
                height:'100%', width:'100%',multihead:true,usePager:false,rownumbers:true,checkbox:false
            });
    }
    function pertonum(stringObj){
      var newstr=stringObj.replace(/%/, "");
      return Number(newstr);
    }

    //渲染能力条
  function renderAbilityBar(rowdata, rowindex, value, column){
     return "<div class='abilitybar'><div class='bar' style='width:" + value * 30 + "px;'></div></div>";
  }
  function renderText(rowdata, rowindex, value, column){
    var content;
    if(pertonum(value)>100){
      content="<span style='color:#2da9fa;'>" + value + "</span>"
    }
    else if(pertonum(value)<0){
      content="<span class='red'>" + value + "</span>"
    }
    else{
      content=value;
    }
    return content;
  }
          
    </script>		
</body>
</html>